<template>
  <div>
    <el-row class="accountCon" :gutter="20">
        <el-col class="leftCon" :span="4">
          <div>
            <i class="el-icon-collection-tag" /> {{this.type == 'read' ? '分类信息' : this.type == 'edit' ?'编辑分类':'新增分类' }}
            <img src="@/assets/images/triangle.png" alt="">
          </div>
        </el-col>
        <el-col class="rightCon" :span="20">
          <el-form
            ref="detail"
            label-position="right"
            label-width="170px"
            :rules="rules"
            :model="detail"
            class="formBox"
          >
            <el-form-item label="类型名称:" prop="name">
              <el-input
                v-model="detail.name"
                class="w200"
                placeholder="请输入类型名称"
                :readonly="readonly"
                show-word-limit
              />
            </el-form-item>
            <el-form-item label="层级:" prop="level">
            <el-select v-model="detail.level" :disabled="readonly" class="w200" @change="levelChange">
                <el-option
                  v-for="item in options.typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="所属父级:" prop="pid" v-if="detail.level == 2 ">
              <el-cascader
                v-model="detail.pid"
                :options="levelOneList"
                :disabled="readonly"
                class="w200"
                @change="changePid"
            />
            </el-form-item>
            <el-form-item label="所属父级:" prop="pid" v-if=" detail.level == 3">
              <el-cascader
                v-model="detail.pid"
                :options="levelTwoList"
                :disabled="readonly"
                class="w200"
                @change="changePid"

            />
            </el-form-item>
            <el-form-item label="是否禁用:" prop="status">
                <el-switch
                  v-model="detail.status"
                  :disabled="readonly"
                  :inactive-value = 1
                  :active-value = 2
                  active-color="#33BEA7">
                </el-switch>
            </el-form-item>
            <el-form-item label="医嘱:" prop="doctor_advice" v-if=" detail.level == 3">
              <el-input
                type="textarea"
                v-model="detail.doctor_advice"
                :autosize="{ minRows: 4}"
                class="w200"
                placeholder="请输入医嘱"
                :readonly="readonly"
                show-word-limit
              />
            </el-form-item>
          </el-form>
        
        </el-col>
    </el-row>
    <div class="btnBox" v-if="this.type != 'read'">
      <el-button
          type="primary"
          size="mini"
          @click="submitForm('detail')"
        >{{type == 'edit' ? '编辑':'新增'}}提交</el-button>
    </div>
  

  </div>

</template>

<script>
import { mapGetters } from 'vuex';
import { editProductType,addProductType,goodsTypeList,getProductTypeParent } from '@/api/goods';
import { convertToTreeData } from '@/utils/constants';
import { readonly } from 'vue';
class Detail {
    name='';
    level='';
    pid='';
    status=1;
}
class Rules {
  name = [
    { required: true, message: '请填写类型名称', trigger: 'blur' }
  ];
  level = [
    { required: true, message: '请选择层级', trigger: 'blur' }
  ];
  pid = [
    { required: true, message: '请选择所属父级', trigger: 'change' },
  ];
  doctor_advice = [
    { required: true, message: '请填写医嘱', trigger: 'blur' },
  ]
}
class Options {
  typeList = [
    { label: '一级类目', value: 1 },
    { label: '二级类目', value: 2 },
    { label: '三级类目', value: 3 }
  ];
  levelList = [];
}
export default {
  data () {
    return {
      options: new Options(), // 选项
      detail: new Detail(),
      rules: new Rules(),
      readonly: false,
      type: '',
      levelTwoList:[],
      levelOneList:[]
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted () {

    if(this.$route.query.type == 'read') this.readonly = true;
    if (this.$route.query.row) {

      this.$route.query.row = JSON.parse(this.$route.query.row);
      this.detail = this.$route.query.row;
      if(this.detail.level == 3) this.detail.pid = [this.detail.one_type, this.detail.pid];
      console.log(this.detail.pid ,"this.detail.pid ")
      this.getOptionsList(this.detail.level);

      this.type = this.$route.query.type;
    }else{
      this.getOptionsList();
    }
  },
  methods: {
    levelChange(){
      this.detail.pid = '';
      this.$refs.detail.clearValidate(); // 清除所有字段的校验结果
    },
    getOptionsList(){
        getProductTypeParent({ level : 'two' }).then(res => {
          this.levelTwoList = convertToTreeData(res.data);

        })
        getProductTypeParent({ level : 'one' }).then(res => {
          this.levelOneList = convertToTreeData(res.data); 
        })
    
    },
    changePid(e){
      console.log(e,"eee")
      this.detail.pid = e.at(-1);
    },
    // 提交
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$route.query.row?this.hint('更新'):this.hint('新建')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 提示
    hint(text){
       this.$confirm(`确定${text}此品项分类吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(1111,"1111")
          this.confirm()

        }).catch((err) => {
          console.log(err,"err")
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },
    // 确认提交
     confirm() {
      console.log(this.detail,this.detail.level,this.detail.pid )
       if(this.detail.level == 1) this.detail.pid = 0;
       if(this.$route.query.row){
        let parmas = {
          name:this.detail.name,
          level:this.detail.level,
          pid:this.detail.pid,
          status:this.detail.status,
          doctor_advice:this.detail.doctor_advice,
        }
        editProductType({...parmas,id: this.$route.query.row.id }).then(res => {
          this.$message({
            type: 'success',
            message: res.msg,

          });
          this.$router.push({name:'品项分类'})
        })
       }else{
         addProductType({...this.detail}).then(res => {
          this.$message({
            type: 'success',
            message: res.msg
          });
          this.$router.push({name:'品项分类'})
        })
       }


    }
  }
}
</script>

<style lang="scss" scoped>
.accountCon{
  display: flex;
  align-items: center;
  background: #fff;
    .leftCon{
      background: #fcfcfc;
      div{
        line-height: 48px;
        color: #fff;
        background: #9EA7B4;
        padding-left: 80px;
        font-size: 14px;
        box-sizing: border-box;
        position: relative;
        img{
          position: absolute;
          right: -30px;
          width: 40px;
          height: 48px;
        }
      }
    }
     .rightCon{
      padding: 40px 0 0 300px;
      .btn{
        margin: 20px 0 50px  80px;
      }
      .mainBtn{
        margin: 30px 0 30px 260px;
      }
      .phoneTip{
        font-size: 12px;
        color: #999;
      }
    }
}
.btnBox{
  margin-top: 100px;
  margin-left: 500px;
}
::v-deep .el-cascader , .el-select{
  width: 360px !important;
}
::v-deep .el-textarea{
  width: 360px!important;
}
::v-deep .el-input__inner{
  width: 360px !important;

  height: 32px;
  line-height: 32px;
}
::v-deep .el-input.is-disabled .el-input__inner{
  background-color: #fff;
  color: #606266;
}
</style>
